<template>
  <div class="class-table">
    <div class="top-select">
      <el-select v-model="value1" placeholder="学期">
        <el-option
          v-for="item in semester"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="value2" placeholder="学院" @change="queryClass">
        <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select v-model="value3" placeholder="班级" @change="queryCoursePlan">
        <el-option
          v-for="item in classNo"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div class="table-wrapper">
      <div class="tabel-container">
        <table>
          <thead>
          <tr>
            <th>时间</th>
            <th
              v-for="(weekNum, weekIndex) in classTableData.courses.length"
              :key="weekIndex"
            >{{'周' + digital2Chinese(weekIndex + 1, 'week')}}</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(lesson, lessonIndex) in classTableData.lessons" :key="lessonIndex">
            <td>
              <p>{{'第' + digital2Chinese(lessonIndex+1) + "节"}}</p>
              <p class="period">{{ lesson }}</p>
            </td>

            <td
              v-for="(course, courseIndex) in classTableData.courses"
              :key="courseIndex"
            >{{classTableData.courses[courseIndex][lessonIndex] || '-'}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CourseArrange"
}
</script>

<style scoped>

</style>
